<template>
    <div class="box">
      <header class=tou>
        <van-icon name="user-circle-o" style="font-size: 50px;"/>用户名：{{ username }}
      </header>
      <main class="zhong">
        <ul>
          <li><van-icon name="bar-chart-o" style="font-size: 20px;color: yellow;"/>会员中心</li>
          <li><van-icon name="peer-pay" style="font-size: 20px;color: blue;"/>我的优惠</li>
          <li><van-icon name="like-o" style="font-size: 20px;color: red;"/>服务中心</li>
          <li><van-icon name="home-o" style="font-size: 20px;color: orangered;"/>小米之家</li>
          <li><van-icon name="bullhorn-o" style="font-size: 20px;color: orangered;"/>我的F码</li>
          <li><van-icon name="after-sale" style="font-size: 20px;color: orangered;"/>礼物码兑换</li>
          <li><van-icon name="setting-o" style="font-size: 20px;color: #eee;"/>设置</li>
        </ul>
      </main>
    </div>
</template>
<script setup>
const username=localStorage.getItem('token')
</script>
<style lang="scss" scoped>
.tou{
  background: orange;
}
.zhong{
  margin-top: 10px;
  ul{
    float: left;
    margin-left: 20px;
    li{
      line-height: 50px;
      border-bottom: 1px solid black;
    }
  }
}
</style>